<template>
    <view class="checkbox">
        <view class="checkbox-content"
              :class="{'bg-unchecked': !checked}" :style="{'background-color': checked ? checkBg : ''}">
            <u-icon v-if="checked" name="checkbox-mark" style="margin-bottom: 9rpx;"
                    color="#ffffff" size="25"></u-icon>
        </view>
    </view>
</template>

<script>
export default {
    name: "cart-checkbox",
    props: {
        checked: {
            type: Boolean,
            default: false
        },
        checkBg: {
            type: String,
            default: 'red'
        }
    },
    data() {
        return {

        }
    },
    methods: {

    }
}
</script>

<style scoped lang="scss">

.checkbox {
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    .checkbox-content{
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        box-sizing: border-box;
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:center;
    }

    .bg-checked{
        background-color: red;
    }

    .bg-unchecked{
        background-color: #FFFFFF;
        border: 1rpx solid grey;
    }
}

</style>
